<template>
    <div class="main main_bg" :style="$store.state.isApp?'paddingTop:0':'paddingTop:1.2rem'">
      <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
      <div class="">
        <ul class="line">
          <li class="area">
            {{ userData.areaFullName }}
          </li>
          <li v-for="(item,k) in viewList">
            <div class="index" :id="pinyin_first(item.name)" v-if="isHasId(k)">{{pinyin_first(item.name)}}</div>
            <ul>
              <li class="db">
                <div class="name">{{item.name}}</div>
                <div class="flex">
                  <div class="s c-red">￥{{ item.agentPriceRMB }}</div>
                  <span>≈{{ item.agentPriceUSDT }}UT</span>
                </div>
                <div class="str">
                  <button class="open" v-if="item.agentOpen">{{$t('agent.doc1')}}</button>
                  <button class="has" v-else-if="item.hasAgent">{{$t('agent.doc2')}}</button>
                  <button class="on" v-else @click="go(item)">{{$t('agent.doc3')}}</button>

                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="shortcut">
        <ul>
          <li :class="{on : curSelect == '#'}" @click="select('#')">#</li>
          <li :class="{on : curSelect == item}" @click="select(item)" v-for="item in shortcutList">{{item}}</li>
        </ul>
      </div>


      <van-popup v-model="OS_A" style="background: none;">
        <div class="os_box">
          <div class="dialag_box db">
            <div class="flex">
              <div class="container bg-fff">
                <div class="con tac">
                  {{$t('agent.doc4')}}
                </div>
                <div class="b db">
                  <div class="flex">
                    <button class="btn" @click="OS_A = false">{{$t('word.ok')}}</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>


    </div>
</template>
<script>


  export default {
  data(){
    return {
      titleSize:this.$t('title.agent2'),
      is_mt:true,
      list:[],
      curSelect: '#',
      areaData:[],
      shortcutList:[],
      OS_A:false

    }
  },
    computed: {
      viewList:function() {
        let pinyin = require('js-pinyin');
        let vList = this.list.slice().sort(function (a,b){
          let aIndex = pinyin.getCamelChars(a.name).substring(0, 1);
          let bIndex = pinyin.getCamelChars(b.name).substring(0, 1);
          return aIndex.charCodeAt() - bIndex.charCodeAt();
        });
        this.shortcutList = [];
        for (let idx in vList) {
          let item = vList[idx];
          let letter = pinyin.getCamelChars(item.name).substring(0, 1);
          if (letter != this.shortcutList.slice(-1)){
            this.shortcutList.push(letter);
          }
        }

        return vList;
      },
      userData:function(){
        return this.$store.state.userData;
      }
    },
    // require
    created() {
      this.$post(this.URL.common.area,{
        pid:this.$route.query.id,
        agentInfo:true
      }).then((res) => {
        if (res.code == 0) {
          this.list = res.data;
        }
      });
    },
    mounted() {
      window.addEventListener("scroll", this.testScroll, true);
    },
    methods: {
      go(item){
        this.OS_A = true
      },
      testScroll(){
        let topOffset = document.documentElement.scrollTop || document.body.scrollTop;
        if(topOffset < 20){
          this.curSelect = "#";
          return ;
        }

        for (let i = 0; i < this.shortcutList.length; i++){
          let ele = this.shortcutList[i];
          let curroffset = document.getElementById(ele).offsetTop;

          if(topOffset - curroffset < 20){
            this.curSelect = ele;
            return ;
          }
        }
      },
      select(item){
        this.curSelect = item;
        if('#' == item){
          document.getElementById("app").scrollIntoView();
        } else {
          document.getElementById(item).scrollIntoView();
        }
      },
      isHasId(index) {
        let curr = this.viewList[index];
        let a = this.pinyin_first(curr.name.toString()).substring(0, 1);
        if(index < 1){
          return true;
        }
        let prev = this.viewList[index-1];
        let b = this.pinyin_first(prev.name.toString()).substring(0, 1);

        if(a == b){
          return false;
        }
        return true;
      },
      pinyin_first(value){
        return this.$pinyin.getCamelChars(value.toString()).substring(0, 1);
      },
    },


}

</script>


<style lang="less" scoped>
  #app {
    .shortcut {
      position: fixed;
      z-index: 30;
      right: 0.2rem;
      top: 1.3rem;
      width: 0.32rem;
      font-size: 0.22rem;
      font-width: 400;
      ul {
        li {
          margin-top: 0.28rem;
          width: 0.32rem;
          height: 0.32rem;
          color: #768196;
          display: flex;
          align-items: center;
          justify-content: center;
          &.on {
            background: #043fd6;
            border-radius: 50%;
            color: #ffffff;
          }
        }
      }
    }
    .line {
      li.area {
        padding: 0 .4rem;
        background: #fff;
        line-height: .88rem;
      }
      > li {
        .index {
          font-size: .28rem;
          font-weight: 400;
          color: #999999;
          line-height: .56rem;
          padding: 0 .4rem;
        }
        > ul {
          background: #fff;
          li {
            height: 1rem;
            border-bottom: .01rem solid #f3f3f3;
            margin: 0 .4rem;
            background: #ffffff;
            position: relative;
            .name {
              width: 1.2rem;
              line-height: .3rem;
              margin-right: .1rem;
            }
            .flex {
              line-height: .28rem;
              div {
                font-size: .28rem;
              }
              span {
                font-size: .22rem;
                color: #666;
              }
            }
            .str {
              button, .has {
                width: 1.2rem;
                height: .48rem;
                background: #f4f5f9;
                border-radius: .1rem;border:0;
                color: #acadaf;
                margin-right: .5rem;
                font-size: .22rem;
              }
              .on {
                background: linear-gradient(-90deg,#053ac2 0%, #2295ed 100%);
                color: #fff;
              }
            }
          }
        }
      }
    }
    .dialag_box {
      .container {
        padding: .4rem;
      }
      .con {
        font-size: .32rem;
        font-weight: 400;
        color: #14191f;
        line-height: .42rem;
        padding-bottom: .4rem;
      }
    }
  }
</style>
